<template>
	<view class="content">

		<view class="header">
			<image :src='this.commonImg() + "/electrical.jpg"' mode="aspectFit" style="width: 100%;display: block;  ">
			</image>

		</view>




		<view class="hspl">
			<view class="gg-title">可回收品类</view>
			<view class="hspl-content">
				<view class="hspl-content-item" v-for="(item,index) in typeList" :key="index"
					:class="[type==item.sort?'select':'']" @click="changeType(item.sort,item.num)">
					<image :src="item.img" mode="aspectFit" :style="{background:item.img}"></image>
					<text>{{item.name}}</text>
				</view>
			</view>
			
			<view class="submit">
				<view class="submit-btn">
					<button type="warn" @click="addHsOrder()">马上预估回收</button>
				</view>
				<view class="text"><text style="color: #11824c;font-weight: bold;margin-right: 10rpx;">✓</text>覆盖全国300+城市，免费上门回收</view>
			</view>
			
		</view>

		<!-- <view class="ygzl">
			<view class="ygzl-title">预估重量</view>
			<view class="ygzl-content">
				<view class="ygzl-content-item" :class="[weight=='1'?'select':'']" @click="changeWeight('1')">
					<text>5-20公斤</text>
					<text class="ms">(超15件)</text>
				</view>
				<view class="ygzl-content-item" :class="[weight=='2'?'select':'']" @click="changeWeight('2')">
					<text>20-50公斤</text>
					<text class="ms">(超30件)</text>
				</view>
				<view class="ygzl-content-item" :class="[weight=='3'?'select':'']" @click="changeWeight('3')">
					<text>50公斤以上</text>
					<text class="ms">(超50件)</text>
				</view>
			</view>
		</view> -->
		

		<!-- 
		<view class="problem" style="margin-bottom: 0;" id='reward'>
			<view class="title">选择回收奖励</view>
			<view class="list" style="margin-bottom: 0;padding-top: 20rpx;">
				<view v-for="(item, index) in welfareList" :key="index" class="welfare-list">
					<view class="content welfare-box" :class="[welfare===item.hs_type?'select':'']"
						@click="welfareclick(item.hs_type)">
						<image :src="item.src" mode="aspectFit"
							style="width:150rpx;height: 150rpx;margin-right: 30rpx;"></image>
						<view class="text">
							<view>
								<text class="label">{{item.label}}</text>
								{{item.text}}
								<text style="color: #3cbdc5;" @click="details()" v-if="item.hs_type==='3'">详情></text>
							</view>
							<view class="welfare-box">
								<text class="num">{{item.num}}</text>
								<button class="btn" size="mini" @click="welfareclick(item.hs_type)">选择奖励</button>
							</view>

						</view>
					</view>
				</view>

			</view>
		</view> -->

		<view class="require">
			<view class="item">
				<text class="bt">预约流程</text>
				<text class="ms">全程免费</text>
			</view>
			<view class="item">
				<text class="bt">回收要求</text>
				<text class="ms">家用电器等</text>
			</view>
			<view class="item">
				<text class="bt">免费上门</text>
				<text class="ms">各大物流</text>
			</view>
		</view>
		<view class="problem">
			<view class="title">常见问题</view>
			<view class="list">
				<uni-collapse ref="collapse">
					<uni-collapse-item v-for="(item, index) in cjwtList" :key="index" thumb="/static/img/q1.png"
						:title="item.title">
						<view class="content">
							<view class="text">
								<rich-text :nodes="item.content"></rich-text>
							</view>
						</view>
					</uni-collapse-item>
				</uni-collapse>
			</view>
		</view>





		<!-- <view class="modal-mask" catchtouchmove="preventTouchMove" v-if="isHsbz"></view>
		<view class="modal-dialog" v-if="isHsbz">
			<view class="modal-content">
				<image @tap="toclose()" class="close" :src='this.commonImg() + "close.png"'></image>
				<view class="title">确认预约</view>
				<view class="content">
					<text>为了给您良好的回收体验，确保回收奖励的顺利发放，请再次确认以下问题</text>
					<view class="tips">
						<view class="item">
							<image :src='this.commonImg() + "problem1.png"'></image>
							<view class="title">
								<text>符合回收标准</text>
								<view class="nr">请确认回收衣物是否不脏，不破，不染色，干净干燥、不发霉变形。</view>
							</view>
						</view>
						<view class="item">
							<image :src='this.commonImg() + "problem2.png"'></image>
							<view class="title">
								<text>重量超过5kg</text>
								<view class="nr">
									请确认打包的衣物鞋包重量超过5kg，<text>如果大于30kg请先联系客服确认。</text>
									<text class="kf" @click="tokefu()">点击联系客服</text>
								</view>
							</view>
						</view>
						<view class="item">
							<image :src='this.commonImg() + "problem3.png"'></image>
							<view class="title">
								<text>是否有贵重物品</text>
								<view class="nr">
									请仔细检查回收衣物中，是否遗漏贵重或重要物品，以免给您带来损失。
								</view>
							</view>
						</view>
					</view>
					<view class="tishi">*提供不合格衣物将会被限制下单功能及无法获得回收奖励</view>
				</view>
				<view class="button" @tap="queren()">
					已阅读并确认
				</view>
			</view>
		</view> -->
	

	</view>
</template>

<script>
	import times from '@/components/pretty-times/pretty-times.vue'

	export default {
		components: {
			times,
		},
		data() {
			return {
				timeActive: 0,
				type: "1",
				weight: "1",
				welfare: '',
				tabList: [{
					title: '上门回收'
				}, {
					title: '免费赠送'
				}],



				pass: false,
				typeList: [{
						name: '空调',
						img: this.commonImg() + "/electrical-2.png",
						sort: '1',
						num: 1
					}, {
						name: '冰箱',
						img: this.commonImg() + "/electrical-3.png",
						sort: '2',
						num: 2
					}, {
						name: '洗衣机',
						img: this.commonImg() + "/electrical-1.png",
						sort: '3',
						num: 3
					}, {
						name: '电视机',
						img: this.commonImg() + "/electrical-5.png",
						sort: '4',
						num: 4
					},
					{
						name: '电脑',
						img: this.commonImg() + "/electrical-4.png",
						sort: '5',
						num: 5
					},
				],
				listAddress: [],
				showModal: false,
				atts: [],
				orderGoods: [],
				cjwtList: [{
						"title": "可回收家电品类?",
						"content": "目前可回收空调、冰箱、洗衣机、电视机、电脑等",
						"id": 1
					},
					{
						"title": "家电上门回收流程?",
						"content": "在线预估估价-选择上门时间和地址-提交订单-师傅联系上门-现场评估并支付费用-回收完成。",
						"id": 2
					},
					{
						"title": "费用如何结算?",
						"content": "收益会通过上门师傅现场转账方式进行结算 1.预估价格仅为参考，实际价格以回收人员上门评估为准:2.预约后，工作人员会与您电话联系，确定上门时间;3.家电回收现金收益请与上门回收人员确定并收取，平台不参与打款支付。",
						"id": 3
					},
					{
						"title": "上门回收会额外收费吗?",
						"content": "上门回收是不会进行额外收费的，小程序订单仅为估价，实际回收费用情况与师傅报价为主，费用和师傅当面进行结算:若师傅已经上门取货过程中，您不想对该家电进行回收，师傅不会收取上门费用。",
						"id": 4
					},
					{
						"title": "需要拆卸和打包吗?",
						"content": "无需拆机/打包，上门当天会有专业师傅上门拆卸搬运。",
						"id": 5
					},
					{
						"title": "哪些因素会影响价格的评估?",
						"content": "家电类是由功能情况、外观损坏情况等各类因素来评判具体咨询收价格，所以在您下单的时候，请详细描述这样方便师傅评估最接近真实的价格；也可避免上门验货时，出现未描述问题后的重新估价。",
						"id": 6
					},
					{
						"title": "提交订单为什么没有联系上门?",
						"content": "若您下单后长时间未有师傅对您的订单进行上门回收和联系分亭有礼可能是您的附近暂时没有该品类的回收师傅，或师傅暂时无法根据您提供的地址上门服务。",
						"id": 7
					}
				],
				acctoken: '',	
				hs_type: '2',
				wx_address: '',
				token: '',
				user: {
					profile: this.commonImg() + "st_pic.png",
					user_name: 'Hi，您还未登录',
					tags: '普通用户',
					mobile: ''
				},
			}
		},

		onLoad(option) {
			console.log(option)
			if (option.pid) {
				uni.setStorageSync("share_pid", option.pid);
			}
		},
		onShow() {
			
			// this.$api.http.get('user-info', {}).then(res => {
			// 	if (res.code == 1) {
			// 		var userInfo = res.data.member;
			// 		var order_static = res.data.order_static;
			// 		if (userInfo.user_name == "") {
			// 			this.user.user_name = "请设置用户名"
			// 		} else {
			// 			this.user.user_name = userInfo.user_name;
			// 		}
			// 		this.user.mobile = userInfo.mobile
			// 		if (userInfo.head_img) {
			// 			// #ifdef MP
			// 			this.user.profile = userInfo.head_img;
			// 			// #endif
			// 		}


			// 	}
			// })

		},
		methods: {
			tokefu() {
				uni.navigateTo({
					url: "/pages/kefu/index"
				})
			},

			details() {
				uni.navigateTo({
					url: '../../../packagePages/tabBar/order/maogou'
				})
			},

		
			queren() {

				uni.navigateTo({
					url: "/pages/tabBar/order/success"
				})

			},
			


			toLogin() {
				
				this.token = uni.getStorageSync("token");
				if(this.token){
					
					uni.navigateTo({
						url: `/packagePages/tabBar/appliances/appraise`
					})
					
				}else{
					uni.showToast({
						title: '请登录',
						icon: "none"
					});
					setTimeout(() => {
						uni.navigateTo({
							url: '/pages/login/login?path=/packagePages/tabBar/appliances/add'
						})
					}, 700)
				}
			},
			
			changeType(e, d) {
				this.type = e;
			},
			changeWeight(e) {
				this.weight = e;
			},



			addHsOrder() {
				this.toLogin()
			
			},
			getAtts(value) {
				console.log("atts", value);
				this.atts = value;
			},

		}
	}
</script>

<style lang="scss">
	page {
		background: #f8f8f8;
	}



	.welfare-box {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-top: 0 !important;

		.label {
			color: #fff;
			font-weight: bold;
			padding: 6rpx 10rpx;
			border-radius: 10rpx;
			text-align: center;
			background: #ff4c45;
			margin-right: 10rpx;
			font-size: 20rpx;
		}

		.btn {
			animation: zoomInOut 2s infinite;
		}

	}

	.welfare-list {
		padding: 20rpx;
		padding-top: 0;

	}

	.welfare-list .content {
		border: 1px solid #ececec;
		border-radius: 10rpx;
		padding-bottom: 20rpx !important;
	}

	.welfare-list .content button {
		margin: 0;
		background: linear-gradient(135deg, #0fD0C3, #3ebcc5);
		color: #fff;
		font-size: 20rpx;
	}

	.welfare-list .content .num {
		color: #999;
		font-size: 20rpx;
	}

	
	.uni-flex {
		display: flex;
	}

	.uni-row {
		flex-direction: row;
	}

	.header {
		background-color: #eaf7eb;
		height: 260rpx;

		/*  #ifdef  APP-PLUS  */
		padding-top: 80rpx;
		align-items: center;

		/*  #endif  */
		image {

			height: 240rpx;

		}

		.usertag {
			padding: 0 20upx;
			background-color: #bb965f;
			border-radius: 30upx;
			font-size: 24upx;
			margin-right: 20upx;
			border: 1px solid #bb965f;
			line-height: 1.6;
		}

		.usertag.login {
			background-color: inherit;
			border: 0;
			padding: 0;
		}

		.nikename {
			font-size: 40rpx;
			position: relative;
			font-weight: bold;
			margin-bottom: 15rpx;


		}

		.icon-btn {
			width: 60upx;
			height: 60upx;
			flex-shrink: 0;
			display: flex;
			position: absolute;
			top: 40rpx;
			/*  #ifdef  APP-PLUS  */
			top: 80upx;
			/*  #endif  */
			right: 4%;
			z-index: 999;

			.icon {
				color: #090b0e;
				display: flex;
				justify-content: flex-end;
				align-items: center;
				font-size: 42upx;
				margin-left: 15rpx;
			}
		}
	}

	.tab {
		border-top-right-radius: 20rpx;
		border-top-left-radius: 20rpx;
		background: #fff;
		margin-top: -20rpx;
		overflow: hidden;

		.tab-item {
			padding: 30rpx 0;
			float: left;
			width: 50%;
			text-align: center;
			font-weight: bold;
			background: #e8ecf8;
			font-size: 28rpx;
			color: #9fa4ae;
		}

		.active {
			background: #fff !important;
			color: #666 !important;
		}
	}

	.ygzl-title {
		font-size: 28rpx;
	}

	
	.hspl {
		background-color: #FFFFFF;
		padding: 40rpx;
		// width: 92%;
		// margin: 30rpx auto 0;
		border-radius: 10px;
		box-sizing: border-box;
	}

	.gg-title {
		font-size: 28rpx;
		color: #222222;
		margin-bottom: 20rpx;
	}

	.hspl-content {
		margin-top: 30upx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.hspl-content-item {
		flex: 1;
		text-align: center;

		text {
			display: block;
			font-size: 26rpx;
			line-height: 50rpx;
			margin-top: 35rpx;
		}

		image {
			width: 80rpx;
			height: 80rpx;
			display: block;
			margin: 12rpx auto 0;
			padding: 10rpx;
			border-radius: 25rpx;
				-webkit-box-reflect: below -26rpx -webkit-linear-gradient(transparent,transparent 40%,rgba(255,255,255,0.6));
		}
	}

	



	.hsyq {
		background-color: #FFFFFF;
		width: 92%;
		margin: 30rpx auto 0;
		border-radius: 10px;
		box-sizing: border-box;
		padding: 30rpx;
	}

	.hsyq-content {
		margin-top: 30upx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.hsyq-content-item {
		flex: 1;
		text-align: center;
	}

	.hsyq-content-item image {
		width: 130upx;
		height: 130upx;
	}

	.hsyq-content-item-remark {
		font-size: 28upx;
		color: #5c5c5c;
	}

	.ygzl {
		background-color: #FFFFFF;
		// width: 92%;
		// margin: 30rpx auto 0;
		border-radius: 10px;
		box-sizing: border-box;
		padding: 40rpx;

	}

	.ygzl-content {
		margin-top: 30upx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.ygzl-content-item {
		padding: 15rpx;
		width: 27%;
		background: #f6f6f6;
		text-align: center;
		border-radius: 10rpx;

		text {
			line-height: 40upx;
			font-size: 28upx;
			color: #333;
			display: block;
		}

		text.ms {
			font-size: 24upx;
			color: #999;
		}
	}

	.ygzl-content-item.select {
		border: 2px solid #3cbdc5;
		background: #fff;

		text {
			color: #3cbdc5;
		}

		text.ms {
			color: #3cbdc5;
		}
	}

	.ygzl-mark {
		margin-top: 30upx;
		display: flex;
		color: #222222;
		font-size: 26upx;
		height: 80upx;
		line-height: 80upx;
		justify-content: space-between;
	}

	.ygzl-mark-btn {
		border-radius: 10upx;
		background: #31b977;
		color: #FFFFFF;
		text-align: center;
		width: 180upx;
	}

	.ygzl-file {
		margin-top: 30upx;
	}

	.explain {
		background-color: #FFFFFF;
		width: 92%;
		margin: 30rpx auto 0;
		border-radius: 10px;
		box-sizing: border-box;
		padding: 30rpx;
	}

	.explain-title {
		text-align: center;
		color: #31b977;
		font-size: 30upx;
		margin-bottom: 30upx;
		font-weight: bold;
	}

	.explain-content {
		margin-top: 15upx;
		color: #666;
		font-size: 26upx;
		line-height: 40rpx;
	}


	.submit {
		margin-top: 30rpx;
		font-size: 24rpx;
		.text{
			text-align: center;
			color: #333;
		}
		
	}

	.submit-explain {
		font-size: 28upx;
		color: #222222;
		text-align: center;
	}

	.submit-btn {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 30rpx;
		button {
			background: linear-gradient(135deg, #ff2d49, #ff482d);
			font-size: 30rpx;
			color: #fff;
			border: none;
			width: 90%;
			height: 100rpx;
			line-height: 100rpx;
			animation: zoomInOut 2s infinite;
		}
		
	}

	/* 定义放大缩小动画 */
	@keyframes zoomInOut {

		0%,
		100% {
			transform: scale(1);
		}

		50% {
			transform: scale(1.1);
			/* 放大1.5倍 */
		}
	}


	.order-goods {
		position: fixed;
		bottom: 60upx;
		left: 30upx;
		width: 100upx;
		height: 100upx;
		z-index: 99;
	}

	.order-goods image {
		width: 100%;
		height: 100%;
	}

	.order-goods-number {
		border-radius: 50%;
		width: 42upx;
		height: 42upx;
		line-height: 42upx;
		background: #E64043;
		color: #FFFFFF;
		position: fixed;
		bottom: 115upx;
		left: 100upx;
		text-align: center;
	}

	.order-modal {
		display: flex;
	}

	.order-modal-item {
		flex: 1;
		font-size: 32upx;
		padding: 10upx 6upx;
		text-align: center;
	}

	.require {
		display: flex;
		width: 92%;
		margin: 40rpx auto 0;
		justify-content: space-between;

		.item {
			background: #ddfeed;
			padding: 30rpx 50rpx;
			border-radius: 20rpx;
			color: #11824c;

			.bt {
				font-size: 30rpx;
				margin-bottom: 10rpx;
				font-weight: bold;
				display: block;
			}

			.ms {
				font-size: 22rpx;
				display: block;
			}
		}

		.item:nth-child(2) {
			background: #fff8db;
			color: #97570d;
		}

		.item:nth-child(3) {
			background: #d9f1fd;
			color: #1d5e7c;
		}
	}

	.problem {
		margin: 30rpx auto 120rpx;
		width: 92%;
		overflow: hidden;

		.select {
			border: 2rpx solid #3cbdc5;
		}

		.title {
			font-size: 28rpx;
			margin-bottom: 20rpx;
			font-weight: bold;
		}

		.list {
			background: #fff;
			border-radius: 20rpx;
			margin-bottom: 50rpx;

			.content {
				padding: 0 4% 0;
				font-size: 24rpx;
				line-height: 45rpx;
				color: #666;

				.text {
					view {
						margin-top: 30rpx;
					}

					p {
						margin-top: 10rpx;
					}
				}
			}

			.uni-collapse,
			.uni-collapse-item__title-box {
				background-color: initial;
			}

			.uni-collapse-item__title-img {
				width: 18px;
				height: 18px;
			}

			.uni-icons.data-v-a2e81f6e {
				color: #2291e0 !important;
				font-weight: bold;
			}

		}

		.partners {
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			margin-bottom: 40rpx;

			image {
				width: 32%;
				border-radius: 10rpx;
				margin-bottom: 20rpx;
			}
		}

	}

	/* ---弹窗css--- */
	.modal-mask {
		width: 100%;
		height: 100%;
		position: fixed;
		top: 0;
		left: 0;
		background: #000;
		opacity: 0.5;
		overflow: hidden;
		color: #fff;
		z-index: 998;
	}

	.modal-dialog {
		width: 100%;
		position: fixed;
		bottom: 0;
		background: #fff;
		border-radius: 15rpx 15rpx 0 0;
		z-index: 999;
	}

	.two {
		width: 74%;
		top: 30%;
		bottom: auto;
		margin: 0 auto;
		left: 0;
		right: 0;
		border-radius: 15rpx;
	}

	.modal-content {
		line-height: 40rpx;
		padding: 40rpx;
		position: relative;

		.close {
			width: 24rpx;
			height: 24rpx;
			position: absolute;
			right: 40rpx;
			top: 48rpx;
		}

		.title {
			font-size: 34rpx;
			color: #3ebcc5;
			font-weight: bold;
			text-align: center;
		}

		.content {
			margin-top: 30rpx;

			text {
				font-size: 28rpx;
				font-weight: bold;
				color: #000;
			}

			.tips {
				margin-top: 20rpx;

				.item {
					display: flex;
					justify-content: space-between;
					align-items: center;
					margin-bottom: 20rpx;
				}

				image {
					width: 100rpx;
					height: 100rpx;
				}

				.title {
					border-bottom: 1px solid #eee;
					width: 80%;
					font-weight: normal;
					line-height: 1.5;
					text-align: left;
					padding-bottom: 20rpx;

					text {
						color: #333;
						font-size: 26rpx;
						font-weight: normal;
					}

					.nr {
						color: #999;
						font-size: 24rpx;

						text {
							color: #e3595a;
						}

						text.kf {
							color: #4593d5;
						}
					}
				}
			}

			.tishi {
				color: #e3595a;
				font-size: 26rpx;
				margin-bottom: 50rpx;
			}
		}

		.button {
			background-color: #3ebcc5;
			color: #fff;
			text-align: center;
			line-height: 100rpx;
			border-radius: 10rpx;
		}
	}
</style>